import React, { Component } from 'react';
import {
  View,
  Text,
  TextInput,
  StyleSheet,
  DeviceEventEmitter,
  TouchableOpacity,
  ScrollView,
  Image,
  Platform,
} from 'react-native';
import PxToDp from '../../../utils/PxToDp';
import FontFamilys from '../../../utils/FontFamilys';
import NavCon from '../../Public/NavCon';
import PersonalInfo from '../../../containers/PersonInfoContainer';

import { submitPriceBill } from '../../../actions/communicateAction';
/* global ws */

// const InteriorList = [{ name: '真皮', id: 0 }, { name: '赛车', id: 1 }, { name: '帆布', id: 2 }];

class PriceConfigBill extends Component {
  constructor(props) {
    super(props);

    this.state = {
      color: 0,
      // inner: 0,
      gift: '',
      price: '',
      carcolor: '',
      pickplace: '',
    };
  }

  _goBack() {
    this.props.navigator.pop();
  }

  _colorBtnSelect(index) {
    this.setState({ color: index });
  }

  // _interiorSelect(index) {
  //   this.setState({ inner: index });
  // }

  _fortmatGift(gift) {
    if (!gift) {
      return '暂无优惠';
    }
    if (typeof (gift) === 'number') {
      if (gift === 100) {
        return '无折扣';
      }
      return `${(gift / 10).toFixed(1)}折`;
    }
    return gift;
  }

  _submit() {
    console.log('this.props======', this.props);
    if (!ws) {
      DeviceEventEmitter.emit('showToast', '客户连接已断开');
      return;
    }
    const { carInfo, dispatch } = this.props;
    const data = {};
    data.address = this.props.address ? this.props.address : carInfo.user.address;
    data.car_id = carInfo.user.car_id;
    data.car = carInfo.car.modeldesc;
    data.carcolor = this.getCarColor();
    data.gift = this.getGift();
    data.phone = this.props.phone ? this.props.phone : carInfo.user.phone;
    data.pickplace = this.getPickPlace();
    data.price = this.getPrice();
    data.username = this.props.name ? this.props.name : carInfo.user.username;
    data.sex = carInfo.user.sex === 1 ? '男' : '女';

    dispatch(submitPriceBill(data, (res) => {
      if (res.ret) {
        if (ws) {
          console.log(JSON.stringify([res.bill]));
          ws.send(JSON.stringify({ bill: JSON.stringify([res.bill]) }));
          DeviceEventEmitter.emit('showToast', '价格表单发送成功！');
          setTimeout(this.props.navigator.pop, 1000);
        }
      }
    }));
  }

  getCarColor() {
    const { colors } = this.props.carInfo;
    if (this.state.carcolor) {
      return this.state.carcolor;
    }
    return colors && colors[0] && colors[0].color;
  }

  getPickPlace() {
    const { dealerInfo } = this.props;
    if (this.state.pickplace) {
      return this.state.pickplace;
    }
    return dealerInfo && dealerInfo.dealer && dealerInfo.dealer.address;
  }

  getGift() {
    const { discount } = this.props.carInfo;
    if (this.state.gift) {
      return this.state.gift;
    }
    return this._fortmatGift(discount);
  }

  getPrice() {
    const { car } = this.props.carInfo;
    if (this.state.price) {
      return this.state.price;
    }
    return car && car.factoryprice;
  }

  render() {
    const { carInfo, dealerInfo } = this.props;
    const user = carInfo.user;
    const { car, colors } = carInfo;
    const defaultGift = carInfo && carInfo.discount && this._fortmatGift(carInfo.discount);
    const defaultPrice = carInfo && carInfo.car && carInfo.car.factoryprice;

    return (
      <View style={[styles.flex, styles.bgColor, styles.viewTitle]}>
        <NavCon
          currentTitle="生成价格配置单"
          bgColor="#fff"
          onPress={() => this._goBack()}
        />

        <ScrollView>
          <PersonalInfo
            user={user}
            car={car}
            dealerInfo={dealerInfo}
          />
          <View style={[styles.section]}>
            <View style={styles.titleBg}>
              <Text style={styles.sectionTitle}>外观</Text>
            </View>
            <Text style={styles.sectionSubTitle}>车身颜色</Text>
            <View style={[styles.row, { flexWrap: 'wrap' }]}>
              {
              colors ?
                colors.map((color, index) => (
                 this.state.color === index
                  ?
                    <TouchableOpacity
                      style={[styles.cbBorder, styles.colorBorYes]}
                      activeOpacity={0.6}
                      key={color.color}
                      onPress={() => this._colorBtnSelect(index)}
                    >
                      <Image style={styles.selectedIcon} source={require('../../../img/selected.png')} />
                      <View style={[styles.colorShow, { backgroundColor: color.color }]} />
                    </TouchableOpacity>
                  :
                    <TouchableOpacity
                      style={[styles.cbBorder, styles.colorBorNo]}
                      activeOpacity={0.6}
                      key={color.color}
                      onPress={() => this._colorBtnSelect(index)}
                    >
                      <View style={[styles.colorShow, { backgroundColor: color.color }]} />
                    </TouchableOpacity>
                ))
                :
                null
            }
            </View>
          </View>
          <View style={[styles.section]}>
            <View style={styles.titleBg}>
              <Text style={styles.sectionTitle}>意向价格</Text>
            </View>

            <View style={[styles.row, styles.top25]}>
              <Text style={styles.itemTitle}>裸车价格</Text>
              <TextInput
                defaultValue={defaultPrice}
                style={[styles.itemContent, styles.textinput1]}
                onChangeText={price => this.setState({ price })}
                underlineColorAndroid="transparent"
              />
            </View>

            <View style={styles.line} />

            <View style={[styles.row, styles.other]}>
              <Text style={styles.itemTitle}>其他优惠</Text>
              <TextInput
                defaultValue={defaultGift}
                style={[styles.itemContent]}
                onChangeText={gift => this.setState({ gift })}
                multiline
                underlineColorAndroid="transparent"
              />
            </View>
          </View>
        </ScrollView>
        <TouchableOpacity
          activeOpacity={0.6}
          style={[styles.submitWrapper]}
          onPress={() => this._submit()}
        >
          <Text style={[styles.submit]}>发送至{user && user.username}</Text>
        </TouchableOpacity>
      </View>);
  }
}

const styles = StyleSheet.create({
  flex: {
    flex: 1,
  },
  row: {
    flexDirection: 'row',
  },
  bgColor: {
    backgroundColor: '#fff',
    alignItems: 'center',
  },
  section: {
    width: '100%',
    backgroundColor: '#fff',
    paddingLeft: PxToDp(20),
    marginBottom: PxToDp(12),
    paddingRight: PxToDp(20),
  },
  sectionSubTitle: {
    marginTop: PxToDp(24),
    marginBottom: PxToDp(10),
    color: '#666',
    fontSize: PxToDp(14),
  },
  itemTitle: {
    width: PxToDp(106),
    fontSize: PxToDp(14),
    color: '#666',
  },
  itemContent: {
    width: PxToDp(164),
    fontSize: PxToDp(14),
    color: '#666',
  },
  textinput1: {
    marginTop: Platform.OS === 'ios' ? PxToDp(1) : PxToDp(-15),
  },
  top25: {
    marginTop: PxToDp(25),
  },
  cbBorder: {
    justifyContent: 'center',
    alignItems: 'center',
    width: PxToDp(66),
    height: PxToDp(30),
    marginRight: PxToDp(14),
    marginBottom: PxToDp(14),
    borderStyle: 'solid',
    borderWidth: PxToDp(1),
    borderRadius: PxToDp(3),
  },
  colorBorYes: {
    borderColor: '#f65252',
  },
  colorBorNo: {
    borderColor: '#dddddd',
  },
  colorShow: {
    width: PxToDp(55),
    height: PxToDp(22),
  },
  selectedIcon: {
    position: 'absolute',
    left: PxToDp(-4),
    top: PxToDp(-4),
    width: PxToDp(16),
    height: PxToDp(16),
    zIndex: 10,
  },
  submitWrapper: {
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%',
    height: PxToDp(50),
    backgroundColor: '#f15556',
  },
  submit: {
    color: '#fff',
    fontSize: PxToDp(16),
  },
  viewTitle: {
    marginTop: Platform.OS === 'ios' ? 20 : 0,
  },
  line: {
    height: PxToDp(1),
    width: '100%',
    marginTop: PxToDp(9),
    backgroundColor: '#EDEDED',
  },
  other: {
    marginTop: PxToDp(11),
  },
  sectionTitle: {
    color: '#000000',
    fontSize: PxToDp(15),
    fontFamily: FontFamilys(),
  },
  titleBg: {
    backgroundColor: '#f8f8f9',
    paddingLeft: PxToDp(10),
    justifyContent: 'center',
    height: PxToDp(38),
  },
});

export default PriceConfigBill;
